<template>
	<view class="register-container">
		<!-- 头部 -->
		<view class="header">
			<view class="back-btn" @tap="goBack">
				<image class="back-icon" src="/static/icons/arrow_left.png"></image>
			</view>
			<text class="page-title">注册账号</text>
		</view>
		
		<!-- 会员类型选择 -->
		<view class="member-type-container">
			<view class="glass-effect">
				<text class="section-title">选择会员类型</text>
				<text class="section-desc">请选择您要注册的会员类型</text>
				
				<view class="type-option" :class="{'selected': selectedType === 'enterprise'}" @tap="selectType('enterprise')">
					<view class="type-icon enterprise">
						<image class="icon" src="/static/icons/building.png"></image>
					</view>
					<view class="type-info">
						<text class="type-name">企业会员</text>
						<text class="type-desc">适合企业、公司和机构</text>
					</view>
				</view>
				
				<view class="type-option" :class="{'selected': selectedType === 'personal'}" @tap="selectType('personal')">
					<view class="type-icon personal">
						<image class="icon" src="/static/icons/user.png"></image>
					</view>
					<view class="type-info">
						<text class="type-name">个人会员</text>
						<text class="type-desc">适合个人承包商和自由职业者</text>
					</view>
				</view>
				
				<button class="next-btn" :disabled="!selectedType" @tap="goToRegisterForm">下一步</button>
			</view>
		</view>
		
		<!-- 底部 -->
		<view class="footer">
			<text class="login-link">已有账号? <text class="link-text" @tap="goToLogin">立即登录</text></text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectedType: ''
			}
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			selectType(type) {
				this.selectedType = type;
			},
			goToRegisterForm() {
				if (!this.selectedType) {
					uni.showToast({
						title: '请选择会员类型',
						icon: 'none'
					});
					return;
				}
				
				// 跳转到注册表单页，并传递会员类型参数
				uni.navigateTo({
					url: `/pages/register/register-form?type=${this.selectedType}`
				});
			},
			goToLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			}
		}
	}
</script>

<style>
	.register-container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-image: linear-gradient(to bottom right, #3b82f6, #8b5cf6);
	}
	
	.header {
		padding: 60rpx 40rpx 30rpx;
		display: flex;
		align-items: center;
	}
	
	.back-btn {
		width: 76rpx;
		height: 76rpx;
		border-radius: 50%;
		background-color: rgba(255, 255, 255, 0.2);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
	}
	
	.back-icon {
		width: 40rpx;
		height: 40rpx;
	}
	
	.page-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #ffffff;
	}
	
	.member-type-container {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0 40rpx;
	}
	
	.glass-effect {
		backdrop-filter: blur(10px);
		background-color: rgba(255, 255, 255, 0.7);
		border: 1px solid rgba(255, 255, 255, 0.18);
		box-shadow: 0 8rpx 12rpx rgba(0, 0, 0, 0.05);
		border-radius: 24rpx;
		padding: 40rpx;
	}
	
	.section-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
	}
	
	.section-desc {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 50rpx;
	}
	
	.type-option {
		display: flex;
		align-items: center;
		padding: 30rpx;
		background-color: rgba(255, 255, 255, 0.7);
		border: 1px solid #e0e0e0;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
		transition: all 0.3s;
	}
	
	.type-option.selected {
		border-color: #3b82f6;
		box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
	}
	
	.type-icon {
		width: 96rpx;
		height: 96rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 30rpx;
	}
	
	.type-icon.enterprise {
		background-color: rgba(59, 130, 246, 0.1);
	}
	
	.type-icon.personal {
		background-color: rgba(139, 92, 246, 0.1);
	}
	
	.icon {
		width: 48rpx;
		height: 48rpx;
	}
	
	.type-info {
		flex: 1;
	}
	
	.type-name {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		margin-bottom: 6rpx;
	}
	
	.type-desc {
		font-size: 26rpx;
		color: #666;
	}
	
	.next-btn {
		background-color: #3b82f6;
		color: #fff;
		height: 88rpx;
		border-radius: 12rpx;
		font-size: 32rpx;
		font-weight: 500;
		margin-top: 30rpx;
	}
	
	.next-btn[disabled] {
		background-color: #a0aec0;
		color: #fff;
	}
	
	.footer {
		padding: 40rpx 0;
		display: flex;
		justify-content: center;
	}
	
	.login-link {
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.8);
	}
	
	.link-text {
		color: #ffffff;
		font-weight: 500;
	}
</style> 